<template>
	<!-- #ifdef MP-WEIXIN -->
	<!-- 小程序 -->
	<view class="">
		<view class="" style="margin-bottom: 40rpx;">
			<map style="height: 600rpx; z-index: 10; position: relative;" class="map" :scale="14" :markers="markers"
				:latitude="latitude" show-location
				 :longitude="longitude">
				<cover-view slot="callout">
					<block v-for="(item,index) in markers" :key="index">
						<cover-view v-if="item.id != 1" class="number-bg" :marker-id="item.id" >
							<cover-view  style="color: aqua;" class="flex items-center">
								<cover-view style="color: red;"  >
									<cover-image class="w-[76rpx] h-[76rpx]" :src="item.image"></cover-image>
								</cover-view>
								<cover-view class="ml-[20rpx]">
									<cover-view
										style=" margin-bottom: 20rpx;font-size: 28rpx;
                                    font-family: PingFang SC;font-weight: bold;color: #000000;">{{item.orderStatus}}</cover-view>
								
									<cover-view
									    v-if="item.id === 2"
										style="font-size: 24rpx;font-family: PingFang SC;font-weight: 400;color: #707070;">距您{{item.distance}}m</cover-view>
								</cover-view>

							</cover-view>
						</cover-view>
					</block>
				</cover-view>
			</map>
		</view>
		<view class="maps">
			<view class="maps-one">
				<view class="maps-two">
					<!-- 预计送达 -->
					<image  class="w-[35rpx] h-[41rpx] mr-[10rpx]" src="@/static/order/ordertime.png"></image>
					<view v-if="modes.status === 0 || modes.status == 4" class="" style="font-size: 34rpx;">
						<view>预计 <text style="color:#FE861C ;">11:45</text> 送达</view>
					</view>
					<!-- 退款中 -->

						<!-- <image v-if="modes.status === 2" class="orderimage" src="@/static/uni.png"></image> -->
						<view   class="" style="font-size: 34rpx;">
							<view v-if="modes.status == 1 || modes.status == 2   " class="Beingrefunded">退款中</view>
						<view v-if="modes.status == 3 " class="Beingrefunded">退款成功</view>
						</view>
				</view>
				<view class="button">
					<!-- 申请退款 -->
					<!-- <view v-if="modes.status === 3" class="" style="margin-right: 20rpx;">
						<up-button text="退款成功" shape="circle" :hairline="true" :disabled="true"
							:customStyle="{border:'1px solid  #D3D3D3',height:'62rpx'}"></up-button>
					</view> -->
					<view v-if="modes.status === 0 " @click="navto('/page_order/Applyrefund/Applyrefund?orderId=' + mode.orderNo)" class="" style="margin-right: 20rpx;">
						<up-button @click="refundReason" text="申请退款" shape="circle" :hairline="true"
							:customStyle="{border:'1px solid  #D3D3D3',height:'62rpx'}"></up-button>
					</view>
					<!-- 退款详情 -->
					<view v-if="modes.status !== 0" @click="goreasonDetails()" class="" style="margin-right: 20rpx;">
						<up-button @click="refundReason" text="退款详情" shape="circle" :hairline="true"
							:customStyle="{border:'1px solid  #D3D3D3',height:'62rpx'}"></up-button>
					</view>
					<!-- 致电骑手 -->
					<view class=""  v-if="modes.orderInfo?.orderContent?.driverPhone !== ''">
						<up-button @click="gophone" text="致电骑手" shape="circle" :hairline="true"
							:customStyle="{border:'1px solid  #D3D3D3',height:'62rpx'}"></up-button>
					</view>
				</view>
			</view>
		</view>
		<view class="orderList">
			<!-- 商品详情 -->
			<order-data :data="orderlist" @gophone="goPhone()" @goStore="goStore()"></order-data>


			<!-- 订单信息 -->
			<order-info :data="data"></order-info>
			<view class="py-[20rpx]">

			</view>
		</view>





	</view>

</template>

<!-- 这里的模块可以看着自己改成 vue2 -->
<script setup>
	import orderInfo from "@/components/orderInfo/orderInfo.vue"
	import orderData from "@/components/orderlist/orderlist.vue"
	// import NP from 'number-precision'
	// console.log("加减乘除",NP.plus(0.1,0.2));
	import {
		ref,
		reactive,
		onMounted,
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		oredrDitils,
		ordercancel,
		refund,
		track
	} from "@/api/order.js"
	import {
		ORDER_Status,
	} from '@/constant/index.js'
	//跳转页面
	const navto = (url) => {
		uni.navigateTo({
			url: url
		})
	}
	
	//订单信息
	const data = ref({

	})
	const phone = ref({
	
	})
	
	const mode = ref({ //发送的数据
		orderNo: '', //订单号

	})
	const modes = ref({ //获取接受的数据
		orderGoods: [], //订单商品
		orderInfo: { //订单信息

		},
		showCancel: false, //取消订单的窗口
		payType: '',
		totle: '',
		status:''
	})
	//订单商品
	const orderlist = ref({
		show: true,
		tradeName: "",
		distributionMode: "",
		num: "",
		orderList: [{
			orderPicture: "",
			specification: "",
			singleorderNum: "",
			name: "",
			singlePrice: "",
		}],
		balingCharge: "",
		deliveryFee: '',
		servicePrice: '',
		totalPrice: ''
	})
	onLoad((e) => {
		mode.value.orderNo = e.orderNo
		console.log("当前订单好", mode.value.orderNo);
	})
	onShow(() => {
		getOrderDetails()
	})
	 //跳转退款详情
	 const goreasonDetails = ()=>{
		 uni.navigateTo({
		 	url:'/page_order/Applyrefund/RefundSuccessful/successPrice?orderId=' + mode.value.orderNo
		 })
	 }
	//拨打骑手电话
	const gophone = ()=>{
		uni.makePhoneCall({
			phoneNumber:modes.value.orderInfo?.orderContent?.driverPhone
		})
	}
	//拨打电话
	const goPhone = () => {
		uni.makePhoneCall({
			phoneNumber: phone.value
		})
		// console.log("拨打电话啊", phone.value);
	}
	//跳转商户
	const goStore = () => {
		uni.navigateTo({
			url: '/page_index/storedetals?id=' + modes.value.orderInfo.storeId
		})

	}

    const location = ref({  //专门用来获取位置信息
		userLocationLat:"", //用户
		userLocationLang:"",
		storeLocationLat:"",//商家
		storeLocationLang:"",
		takeawayLocationLat:"",//骑手
		takeawayLocationLang:"",
		distance:'',//距离
		
	})
	const  getRider = ()=>{ //4.4.10 获取骑手位置
		track({orderId: mode.value.orderNo}).then(res=>{
			location.value.takeawayLocationLat =  res.result.position.lat
			location.value.takeawayLocationLang = res.result.position.lng
			location.value.distance =  res.result.distanceDestination
		})
	}
	let getOrderDetails = () => {
		orderlist.value.orderList = []
		
		oredrDitils({
			orderId: mode.value.orderNo
		}).then(res => {
			if(res.result.orderInfo.orderStatus == 0 || res.result.orderInfo.orderStatus == 4){
				getRider()
			}
			//商家位置
			location.value.storeLocationLat = res.result.orderInfo.orderContent.storeLat
			location.value.storeLocationLang = res.result.orderInfo.orderContent.storeLng
			
			latitude.value = location.value.storeLocationLat  //初始化显示商家的位置
			longitude.value = location.value.storeLocationLang
			
			//用户位置
			location.value.userLocationLat = res.result.orderInfo.orderContent.lat
			location.value.userLocationLang = res.result.orderInfo.orderContent.lng
			
		
			
			// modes.value.orderGoods = res.result.orderGoods
			 modes.value.orderInfo = res.result.orderInfo
			modes.value.status = res.result.orderInfo.refundStatus //退款状态
			console.log("退款状态",res);
			modes.value.payType = res.result.orderInfo.payType
			data.value = res.result.orderInfo
			phone.value = res.result.storeInfo.phone
			orderlist.value.tradeName = res.result.orderInfo.storeName //店铺名称
			orderlist.value.balingCharge = res.result.orderInfo.packagePrice //打包费`
			orderlist.value.deliveryFee = res.result.orderInfo.deliveryFee //配送费
			//orderlist.value.servicePrice=0, //服务费
			orderlist.value.totalPrice = res.result.orderInfo.totalPrice //所有商品总价
			res.result.orderGoods.forEach(item => { //商品列表
				orderlist.value.orderList.push({
					goodsImages: item.goodsImages[0], //商品图片1
					goodsName: item.goodsName, //商品名称2
					singleorderNum: item.goodsNum, //商品数量1
					specification: item.goodsSpecSuk, //商品规格1
					subtotalPrice: item.totalPrice, //当前商品价格1
					batchingIds: item.batchings, //商品配料1
				})
			})
			console.log("门店位置",latitude.value,longitude.value );	
			//获取商家，用户，骑手位置
			markers.value.forEach(item=>{
				if(item.id === 1){ //用户位置
					item.latitude = location.value.userLocationLat
					item.longitude = location.value.userLocationLang
					console.log("用户位置",item.latitude,item.longitude);
				}
				if(item.id === 3){ //商家位置
					item.latitude = location.value.storeLocationLat
					item.longitude = location.value.storeLocationLang
					//获取当前商家的订单状态
					const orderStatus =  ORDER_Status[modes.value.orderInfo.orderStatus]?.value
					if(orderStatus !== 3 || orderStatus !== 4 ){
						item.orderStatus = ORDER_Status[modes.value.orderInfo.orderStatus]?.text
					}
					 console.log("获取当前商家的订单状态",item.orderStatus);
				}
				setTimeout(()=>{
					if(item.id == 2){//骑手位置
						item.latitude  = location.value.takeawayLocationLat 
						item.longitude =location.value.takeawayLocationLang 
						item.distance = location.value.distance
						
						console.log("骑手信息",item);
					}
				},500)
				
			})
		})
	
	
	
	}
	// 经纬度
	let latitude = ref(30.722312);
	let longitude = ref(103.982078);
	// 标记点
	let markers = ref([
		//我的位置
		{
			id: 1,
			latitude: '',
			longitude: '',
			image: '',
			iconPath: "/static/my.png",
			width: 60,
			height: 60,
			number: '我的位置',
			orderStatus: '我的位置',
			type: 1,
			distance: '',
			name:'',
			phone:'',
			customCallout: {
				anchorY: 0, // Y轴偏移量
				anchorX: 0, // X轴偏移量
				display: "ALWAYS" // 一直展示
			}
		},
		//骑手
		{
			id: 2,
			latitude: '',
			longitude: '',
			image: '/static/homeimg/huangwm.png',
			iconPath: "",
			width: 45,
			height: 45,
			number: "",
			orderStatus: '',
			distance: '',
			type: 2,
			name:'',
			phone:'',
			customCallout: {
				anchorY: 0, // Y轴偏移量
				anchorX: 0, // X轴偏移量
				display: "ALWAYS" // 一直展示
			}
		},
		//商家
		{
			id: 3,
			latitude: '',
			longitude: '',
			image: '/static/homeimg/stare.png',
			iconPath: "",
			width: 45,
			height: 45,
			number: "商家备餐中",
			orderStatus: '',
			distance: '',
			type: 3,
			name:'',
			phone:'',
			customCallout: {
				anchorY: 0, // Y轴偏移量
				anchorX: 0, // X轴偏移量
				display: "ALWAYS" // 一直展示
			}
		},

	])
</script>

<!-- 高德地图 web api -->
<!-- 地图引入高德 使用renderjs 引入 对renderjs不了解 可以看着案例去弄 -->
// <script module="aMapRenderJs" lang="renderjs">
// 	const A_MAP_KEY = "cd60afb4e5a22c569f4c42ce75a34be5"; // 地图key
// 	const A_MAP_SECRET_KEY = "8c30043dbe2ac5dbcedaa5f2e7320d48"; // 地图密钥

// 	export default {
// 		data() {
// 			return {
// 				map: null,
// 				markersList: []
// 			}
// 		},
// 		mounted() {
// 			this.getmarkers()
// 			// 地图初始化 
// 			if (typeof window.AMap === 'function') {
// 				this.initAmap();
// 			} else {
// 				window._AMapSecurityConfig = {
// 					securityJsCode: A_MAP_SECRET_KEY,
// 				};
// 				const script = document.createElement('script');
// 				script.src = `https://webapi.amap.com/maps?v=1.4.15&key=${A_MAP_KEY}&plugin=AMap.Walking`;
// 				script.onload = this.initAmap.bind(this);
// 				document.head.appendChild(script);
// 			}
// 		},
// 		methods: {
// 			// 获取 外卖员的数据
// 			getmarkers(e) {
// 				if (e) {
// 					this.markersList = e
// 				}
// 			},
// 			// 初始化
// 			initAmap() {
// 				let that = this
// 				this.map = new AMap.Map('amap', {
// 					resizeEnable: true,
// 					zoom: 17,
// 					center: [113.48, 23.12], //初始化地图中心点位置
// 				})
// 				setTimeout(function() {
// 					// 遍历 外卖员位置
// 					that.markersList.forEach(item => {
// 						const wicon = new AMap.Icon({
// 							size: new AMap.Size(45, 45), // 图标尺寸
// 							image: './static/backspace.png', // Icon的图像
// 							imageSize: new AMap.Size(45, 45) // 根据所设置的大小拉伸或压缩图片
// 						});
// 						const wmarker = new AMap.Marker({
// 							position: [item.longitude, item.latitude],
// 							offset: new AMap.Pixel(-10, -10),
// 							icon: wicon, // 添加 Icon 实例
// 						});
// 						that.map.add(wmarker);
// 						// 
// 						const wcontent =
// 							"<div style='background-color: #fff;border-radius: 10px;padding: 10px 15px;font-size: 14px;width: 123px;'>当前接单量：" +
// 							item.number + "单</div>";
// 						const wmarkert = new AMap.Marker({
// 							content: wcontent, // 自定义点标记覆盖物内容
// 							position: [item.longitude, item.latitude],
// 							offset: new AMap.Pixel(-55, -55) // 相对于基点的偏移位置
// 						});
// 						that.map.add(wmarkert);
// 					})
// 				}, 200)

// 			}
// 		}
// 	}
// </script>


<style lang="scss" scoped>
	::v-deep .u-cell__body.data-v-3fd6feca {
		padding: 10rpx 20rpx;
		align-items: start;
	}

	::v-deep .u-cell-group__title__text.data-v-014d39dc {
		font-size: 32rpx;
		line-height: 16px;
		color: #000000;
	}

	::v-deep .u-cell-group__title.data-v-014d39dc {
		padding: 20rpx 20rpx 10rpx 20rpx;
		font-weight: 500;
	}

	.button {
		display: flex;
		justify-content: space-between;

	}


	.orderList {
		// border: red solid 1px;
		z-index: 10;
		padding: 0rpx 20rpx 0rpx 20rpx;
		width: calc(100% - 0rpx);
		height: auto;
		bottom: 0rpx;
		position: absolute;
		top: 540rpx;
		box-sizing: border-box;

	}

	.maps-one {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.maps-two {
		display: flex;
		align-items: center;
	}

	.orderimage {
		width: 37rpx;
		height: 44rpx;
		padding-right: 14rpx;
	}

	.maps {
		z-index: 10;
		margin: 0 20rpx;
		padding: 0rpx 20rpx;
		width: calc(100% - 40rpx);
		height: 120rpx;
		line-height: 120rpx;
		position: absolute;
		top: 400rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 20rpx;

	}

	.bgs {
		background-color: #fff;
		border-radius: 10px;
		padding: 10px 15px;
		font-size: 14px;
	}

	.map {
		width: 100%;
		height: 100vh;

		.number-bg {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx 30rpx;
			font-size: 28rpx;
		}
	}
</style>